// 函数式组件调用的封装
// 实现步骤：
// 1.函数的架子实现
// 2.渲染 Message 组件
// 2.1以 Message组件为参数调用createVNode生成一个虚拟dom,并且传入props
// 2.2使用render 挂载函数对虚拟dom进行挂载渲染 ，要准备一个挂载位置

import { render, createVNode } from 'vue'
import _Message from './index.vue'
// 1
function Message ({ type, text }) {
  // 2
  // 生成一个虚拟dom vnode
  const messageVNode = createVNode(
    // createVNode参数一
    _Message,
    // createVNode参数二：props参数
    {
      type, text
    }
  )
  // 创建div节点，对虚拟dom进行挂载， 新增一个可以挂载的位置在body末尾新增一个div
  const div = document.createElement('div')
  document.body.append(div)
  // render实现渲染
  render(messageVNode, div)
  // 1.5s后隐藏
  setTimeout(() => {
    render(null, div)
  }, 1500)
}

export default Message
